.searchRoot {
    flex: 1;
}

.searchInput {
    flex: 1;

    @mixin light {
        background-color: alpha(var(--mantine-color-gray-1), 0.3);
    }
    @mixin dark {
        background-color: alpha(var(--mantine-color-dark-5), 0.3);
    }

    --input-bd-focus: var(--mantine-color-ldGray-7);
    &:focus {
        outline: 4px solid var(--mantine-color-ldGray-2);
    }
}

.searchDropdownScrollContent > div {
    max-width: 100%;
}

.comboboxOption:hover > div,
.comboboxOption[data-combobox-selected],
.comboboxOption[data-combobox-selected] > div {
    background-color: var(--mantine-color-ldGray-0);
    color: inherit;

    @mixin dark {
        background-color: var(--mantine-color-dark-7);
    }
}

.comboboxHeader {
    border-radius: 0;
    border-top-left-radius: var(--mantine-radius-sm);
    border-top-right-radius: var(--mantine-radius-sm);
    overflow: hidden;
}
